<template>
  <div class="header-lable">
    <div @click="labelIndex(index)" v-for="(item, index) in headerLable" :key="index" :class="index == activeLabelIndex ? 'active' : ''">
      {{ item }}
    </div>
  </div>
  <!-- 搜索 -->
  <div class="seacher-content" v-show="activeLabelIndex != 3">
    <!-- 标签找房 -->
    <div v-show="activeLabelIndex == 0">
      <div class="example-block">
        <span class="example-demonstration">项目名称</span>
        <el-select
          @change="search"
          filterable
          :filter-method="filterList"
          v-model="queryParams.xmmc"
          placeholder="请输入项目名称"
          popper-class="pg-custom-cascader"
          clearable
        >
          <el-option v-for="(item, index) in xrxmProjectList" :key="index" :label="item.label" :value="item.value" class="custom-select-option" />
        </el-select>
        <div class="inquire" style="cursor: pointer" @click="resetSearch('点击清空')">清空</div>
      </div>
      <div class="seacher-title">
        <span>交通</span>
      </div>
      <div style="display: flex">
        <div class="example-block">
          <span class="example-demonstration">地铁</span
          ><el-cascader
            :filterable="queryParams.subwayList.length > 0 ? false : true"
            v-model="queryParams.subwayList"
            @change="trafficChange"
            collapse-tags
            collapse-tags-tooltip
            :options="trafficOptions"
            :props="props"
            placeholder="地铁"
            popper-class="custom-cascader pg-custom-cascader"
            :show-all-levels="false"
          />
        </div>
        <div class="example-block" style="margin-left: 23px">
          <span class="example-demonstration">公交</span
          ><el-cascader
            :filterable="queryParams.busList.length > 0 ? false : true"
            @visible-change="visibleChange"
            :disabled="switchs"
            v-model="queryParams.busList"
            @change="trafficChange1"
            :options="trafficOptions1"
            :props="props"
            collapse-tags
            collapse-tags-tooltip
            placeholder="公交"
            popper-class="custom-cascader pg-custom-cascader"
            :show-all-levels="false"
          />
        </div>
      </div>
      <div class="example-block example-block-zgd" style="padding-bottom: 5px">
        <span class="example-demonstration">主干道</span
        ><el-cascader
          :filterable="queryParams.highStreetList.length > 0 ? false : true"
          @visible-change="visibleChange"
          :disabled="switchs"
          v-model="queryParams.highStreetList"
          @change="streetSelectListChange"
          :options="streetSelect"
          :props="props"
          collapse-tags
          collapse-tags-tooltip
          placeholder="主干道"
          popper-class="custom-cascader pg-custom-cascader"
          :show-all-levels="false"
        />
      </div>
      <div class="seacher-title seacher-title1"><span>区位条件</span></div>
      <div style="display: flex" class="small-inp1">
        <div class="example-block">
          <span class="example-demonstration example-demonstration4">三甲医院</span>
          <el-cascader
            :filterable="queryParams.threeHospitalsList.length > 0 ? false : true"
            @visible-change="visibleChange"
            :disabled="switchs"
            v-model="queryParams.threeHospitalsList"
            @change="hospitalListChange"
            :options="hospitalSelect"
            :props="props"
            collapse-tags
            collapse-tags-tooltip
            placeholder="三甲医院"
            popper-class="custom-cascader pg-custom-cascader"
            :show-all-levels="false"
          />
        </div>
        <div class="example-block" style="margin-left: 11px">
          <span class="example-demonstration">商圈</span>
          <el-cascader
            :filterable="queryParams.sqList.length > 0 ? false : true"
            @visible-change="visibleChange"
            :disabled="switchs"
            v-model="queryParams.sqList"
            @change="ocationalListChange"
            :options="businessSelect"
            :props="props"
            collapse-tags
            collapse-tags-tooltip
            placeholder="商圈"
            popper-class="custom-cascader pg-custom-cascader"
            :show-all-levels="false"
          />
        </div>
      </div>
      <div class="seacher-title"><span>学区</span></div>
      <div style="display: flex">
        <div class="example-block">
          <span class="example-demonstration example-demonstration4">中学</span>
          <el-cascader
            :filterable="queryParams.middleSchoolList.length > 0 ? false : true"
            @visible-change="visibleChange"
            :disabled="switchs"
            v-model="queryParams.middleSchoolList"
            @change="schoolDistrictChange1"
            :options="schoolListOptions1"
            :props="props"
            placeholder="中学学区"
            popper-class="custom-cascader pg-custom-cascader"
            collapse-tags
            collapse-tags-tooltip
            :show-all-levels="false"
          />
        </div>
        <div class="example-block" style="margin-left: 23px">
          <span class="example-demonstration example-demonstration4">小学</span>
          <el-cascader
            :filterable="queryParams.gradeSchoolList.length > 0 ? false : true"
            @visible-change="visibleChange"
            :disabled="switchs"
            v-model="queryParams.gradeSchoolList"
            @change="schoolDistrictChange"
            :options="schoolListOptions"
            :props="props"
            placeholder="小学学区"
            popper-class="custom-cascader pg-custom-cascader"
            collapse-tags
            collapse-tags-tooltip
            :show-all-levels="false"
          />
        </div>
      </div>
      <div class="seacher-title seacher-title1"><span>更多标签</span></div>
      <transition name="fade">
        <div class="from-box" ref="fromBox">
          <el-form :model="queryParams" label-position="left">
            <el-form-item label="周边">
              <el-checkbox-button
                @change="search"
                v-model="queryParams.zbList"
                :label="item.label"
                v-for="(item, index) in formMore.zbList"
                :key="index"
              />
            </el-form-item>
            <el-form-item label="类型">
              <el-checkbox-button
                @change="search"
                v-model="queryParams.lxList"
                :label="item.label"
                v-for="(item, index) in formMore.lxList"
                :key="index"
              />
            </el-form-item>
            <el-form-item label="户型">
              <el-checkbox-button
                @change="search"
                v-model="queryParams.hxList"
                :label="item.label"
                v-for="(item, index) in formMore.hxList"
                :key="index"
              />
            </el-form-item>
            <el-form-item label="售卖状态">
              <el-checkbox-button
                @change="search"
                v-model="queryParams.smztList"
                :label="item.label"
                v-for="(item, index) in formMore.smztList"
                :key="index"
              />
            </el-form-item>
            <el-form-item label="建筑样式">
              <el-checkbox-button
                @change="search"
                v-model="queryParams.jzysList"
                :label="item.label"
                v-for="(item, index) in formMore.jzysList"
                :key="index"
              />
            </el-form-item>
            <el-form-item label="单价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
              <el-slider @change="search" v-model="moneyList" range :max="100000" :min="0" style="width: 38%; margin-left: 5px" />
              <el-input @change="search" v-model="moneyList[0]" class="unit-l-5"></el-input><span>~</span
              ><el-input @change="search" v-model="moneyList[1]" class="unit-l-5"></el-input><span>元</span>
            </el-form-item>
            <el-form-item label="楼层&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
              <el-slider @change="search" v-model="lcList" range :max="65" :min="1" style="width: 38%; margin-left: 5px" />
              <el-input @change="search" v-model="lcList[0]" class="unit-l-5"></el-input><span>~</span
              ><el-input @change="search" v-model="lcList[1]" class="unit-l-5"></el-input><span>层</span>
            </el-form-item>
            <el-form-item label="房屋面积">
              <el-slider @change="search" v-model="mjList" range :max="1000" :min="0" style="width: 38%; margin-left: 5px" />
              <el-input @change="search" v-model="mjList[0]" class="unit-l-5"></el-input><span>~</span
              ><el-input @change="search" v-model="mjList[1]" class="unit-l-5"></el-input><span>m²</span>
            </el-form-item>
            <el-form-item label="房龄&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
              <el-slider @change="search" v-model="flList" range :max="50" :min="0" style="width: 38%; margin-left: 5px" />
              <el-input @change="search" v-model="flList[0]" class="unit-l-5"></el-input><span>~</span
              ><el-input @change="search" v-model="flList[1]" class="unit-l-5"></el-input><span>年</span>
            </el-form-item>
          </el-form>
        </div>
      </transition>
    </div>
    <!-- 评估预测 -->
    <!-- <div v-show="activeLabelIndex == 2" class="assess-btn">
      <assess></assess>
    </div>
    <div class="btn" v-if="activeLabelIndex == 1 || activeLabelIndex == 0">
      <div class="inquire" style="cursor: pointer" @click="search">查询</div>
      <div class="inquire" style="cursor: pointer" @click="resetSearch('点击清空')">清空</div>
    </div> -->
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, defineEmits, watchEffect, getCurrentInstance } from "vue";
import { piniaPolylineState } from "@/store/gisStatus";
import assess from "@/components/gisPage/assess.vue";
const piniaPolylineData = piniaPolylineState();
import {
  getTraffic,
  getHighStreetSelect,
  getHospitalSelect,
  getBusinessSelect,
  getSchoolList,
  moreInfo,
  selectGisProjectList,
  selectAllProjectListSelect,
  selectAreaProjectList,
} from "@/api/gisHouseAnalysAlert";
import busEmitter from "@/utils/bus";
const instance = getCurrentInstance();
const props = { multiple: true };
const coverShow = ref(false);
const headerLable = ref(["精准找房"]);
const activeLabelIndex = ref(0);
const queryParams = reactive({
  subwayList: [],
  busList: [],
  highStreetList: [],
  threeHospitalsList: [],
  sqList: [],
  middleSchoolList: [],
  gradeSchoolList: [],
  zbList: [],
  lxList: [],
  hxList: [],
  smztList: [],
  jzysList: [],
  minPrice: 0,
  maxPrice: 0,
  maxLc: 1,
  minLc: 1,
  maxArea: 0,
  minArea: 0,
  xmmc: "",
  minBuildAge: 0,
  maxBuildAge: 0,
  sort: "1",
});
const queryParamsCsh = reactive({
  subwayList: [],
  busList: [],
  highStreetList: [],
  threeHospitalsList: [],
  sqList: [],
  middleSchoolList: [],
  gradeSchoolList: [],
  zbList: [],
  lxList: [],
  hxList: [],
  smztList: [],
  jzysList: [],
  minPrice: 0,
  maxPrice: 0,
  maxLc: 1,
  minLc: 1,
  maxArea: 0,
  minArea: 0,
  xmmc: "",
  minBuildAge: 0,
  maxBuildAge: 0,
  sort: "1",
});

// 房产评估 - 项目下拉
const trafficOptions = ref<any>([]); //地铁
const trafficOptions1 = ref<any>([]); //公交
const streetSelect = ref<any>([]); //主干道
const hospitalSelect = ref<any>([]); //医院
const businessSelect = ref<any>([]); //商圈
const schoolListOptions = ref<any>([]); //小学
const schoolListOptions1 = ref<any>([]); //中学
const moneyList = ref<any>([0, 0]);
const lcList = ref<any>([1, 1]);
const mjList = ref<any>([0, 0]);
const flList = ref<any>([0, 0]);
const formMore = ref<any>({});
const traffic_index = ref(1);
const fromBox = ref();
const xmProjectList = ref();
const xrxmProjectList = ref();
const switchs = ref(false);
// 项目下拉
const filterList = (query = "") => {
  let arr = xmProjectList.value.filter((item: any) => {
    return item.label.includes(query) || item.value.includes(query);
  });
  if (arr.length > 50) {
    xrxmProjectList.value = arr.slice(0, 50);
  } else {
    xrxmProjectList.value = arr;
  }
};
const selectAllProjectListSelectFun = async () => {
  let { data } = await selectAllProjectListSelect({});
  console.log(data);
  xmProjectList.value = data;
};
// 切换顶部标签
const labelIndex = (ind: number) => {
  if (activeLabelIndex.value == ind) {
    activeLabelIndex.value = 3;
  } else {
    activeLabelIndex.value = ind;
  }
};

//1地铁2公交筛选条件
const queryCondition = async (type: number) => {
  let { data } = await getTraffic({ type });
  if (type == 1) {
    trafficOptions.value = data[0].children;
  }
  if (type == 2) {
    trafficOptions1.value = data[0].children;
  }
};
// 主干道筛选条件
const getHighStreetSelectFun = async () => {
  let { data } = await getHighStreetSelect({});
  streetSelect.value = data;
};
//医院筛选条件
const getHospitalSelectFun = async () => {
  let { data } = await getHospitalSelect({});
  hospitalSelect.value = data[0].children;
};
//商圈筛选条件
const getBusinessSelectFun = async () => {
  let { data } = await getBusinessSelect({});
  businessSelect.value = data[0].children;
};

//学区搜索条件1小学2中学
const schoolDistrict = async (type: number) => {
  let { data } = await getSchoolList({ type });
  if (type == 1) {
    schoolListOptions.value = data;
  }
  if (type == 2) {
    schoolListOptions1.value = data;
  }
};

//更多条件
const moreCondtion = async () => {
  await moreInfo([]).then((res) => {
    formMore.value = res.data;
    console.log(formMore.value);
  });
};
//项目信息
// 0初始化   1带条件查询  2重置
const gisProjectList = async (type: number) => {
  // 判断是否为初始化状态
  queryParams.xmmc ? queryParams.xmmc : (queryParams.xmmc = "");
  const isEqual = JSON.stringify(queryParams) === JSON.stringify(queryParamsCsh);
  if (isEqual && type != 0) {
    activeLabelIndexone();
    busEmitter.emit("borderFun", "清空数据");
    busEmitter.emit("getListData", 2);
    busEmitter.emit("getpieEchart", 2);
    return;
  }

  if (type == 2) {
    busEmitter.emit("getListData", type);
    busEmitter.emit("getpieEchart", type);
    return;
  }
  
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
    customClass: "loading-class",
  });

  let areaProject = await selectAreaProjectList(queryParams);
  let { data } = await selectGisProjectList(queryParams);
  data.areaProjectVoList = areaProject.data;
  loading.close();
  busEmitter.emit("borderFun", data);
  if (type == 1) {
    busEmitter.emit("getListData", data);
    // busEmitter.emit("getSwiperEchart", data);
    busEmitter.emit("getpieEchart", data);
    busEmitter.emit("getCesiumData", data);
  }
};

//获取地铁选中值
const trafficChange = async (val: { flat: (arg0: number) => never[] }) => {
  queryParams.subwayList = val.flat(1);
  search();
};
//获取公交选中值
const trafficChange1 = async (val: { flat: (arg0: number) => never[] }) => {
  queryParams.busList = val.flat(1);
  search();
};
//获取主干道选中值
const streetSelectListChange = async (val: { flat: (arg0: number) => never[] }) => {
  queryParams.highStreetList = val.flat(1);
  search();
};
//获取医院选中值
const hospitalListChange = async (val: { flat: (arg0: number) => never[] }) => {
  queryParams.threeHospitalsList = val.flat(1);
  search();
};
//获取商圈选中值
const ocationalListChange = async (val: { flat: (arg0: number) => never[] }) => {
  queryParams.sqList = val.flat(1);
  search();
};
//获取中学学区选中值
const schoolDistrictChange1 = (val: any) => {
  const secondItems = val.map((item: any) => item[1]);
  queryParams.middleSchoolList = secondItems;
  search();
};

//获取小学学区选中值
const schoolDistrictChange = (val: any) => {
  const secondItems = val.map((item: any) => item[1]);
  queryParams.gradeSchoolList = secondItems;
  search();
};

//查询
const search = async () => {
  queryParams.minPrice = moneyList.value[0];
  queryParams.maxPrice = moneyList.value[1];
  queryParams.minLc = lcList.value[0];
  queryParams.maxLc = lcList.value[1];
  queryParams.minArea = mjList.value[0];
  queryParams.maxArea = mjList.value[1];
  queryParams.minBuildAge = flList.value[0];
  queryParams.maxBuildAge = flList.value[1];
  gisProjectList(1);
};
//清空

// 清空表单2
const activeLabelIndexone = () => {
  queryParams.middleSchoolList = [];
  queryParams.gradeSchoolList = [];
  queryParams.subwayList = [];
  queryParams.busList = [];
  queryParams.highStreetList = [];
  queryParams.threeHospitalsList = [];
  queryParams.sqList = [];
  queryParams.zbList = [];
  queryParams.lxList = [];
  queryParams.hxList = [];
  queryParams.smztList = [];
  queryParams.jzysList = [];
  queryParams.minPrice = 0;
  queryParams.maxPrice = 0;
  queryParams.maxLc = 1;
  queryParams.minLc = 1;
  queryParams.maxArea = 0;
  queryParams.minArea = 0;
  queryParams.sort = "1";
  moneyList.value[0] = 0;
  moneyList.value[1] = 0;
  lcList.value[0] = 1;
  lcList.value[1] = 1;
  mjList.value[0] = 0;
  mjList.value[1] = 0;
  flList.value[0] = 0;
  flList.value[1] = 0;
  queryParams.xmmc = "";
};
const resetSearch = (type: string) => {
  // 点击清空是清空所有的   查询清空是清空其他tab的
  if (type == "点击清空") {
    activeLabelIndexone();
    busEmitter.emit("borderFun", "清空数据");
  }
  gisProjectList(2);
};

busEmitter.on("setProValue", (type) => {
  queryParams.sort = type;
  gisProjectList(1);
});

// 监听搜索框状态
const visibleChange = (visible: any) => {
  if (visible) {
    coverShow.value = true;
  } else {
    coverShow.value = false;
  }
};
// 加
selectAllProjectListSelectFun();
queryCondition(1);
queryCondition(2);
getHighStreetSelectFun();
getHospitalSelectFun();
getBusinessSelectFun();
schoolDistrict(1);
schoolDistrict(2);
moreCondtion();
gisProjectList(0);
onMounted(() => {});
</script>
<style scoped lang="less">
// 新
.header-lable {
  position: fixed;
  top: 28px;
  left: 50px;
  z-index: 200000;
  display: flex;

  div {
    width: 158px;
    height: 45px;
    font-size: 26px;
    color: #ffffff;
    line-height: 36px;
    text-shadow: 0px 1px 2px #062244;
    background: url("@/assets/img/gisHouseAnalysAlert/header-label.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    padding-top: 2px;
    box-sizing: border-box;
    justify-content: center;
    margin-right: -11px;
    cursor: pointer;
  }

  .active {
    background: url("@/assets/img/gisHouseAnalysAlert/header-label-active.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

.seacher-content {
  width: 400px;
  background: linear-gradient(180deg, rgba(71, 121, 185, 0.85) 0%, rgba(10, 65, 118, 0.6) 100%);
  border-radius: 0px 0px 0px 0px;
  position: fixed;
  top: 100px;
  left: 50px;
  z-index: 1000;
  padding: 24px;
  box-sizing: border-box;

  .seacher-title {
    width: 348px;
    height: 19px;
    background: url("@/assets/img/gisHouseAnalysAlert/seacher-title.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 16px;
    margin-top: 5px;
    font-size: 20px;
    color: #e9d484;
    display: flex;
    align-items: center;

    span {
      margin-left: 25px;
    }
  }

  .seacher-title1 {
    background: url("@/assets/img/gisHouseAnalysAlert/seacher-title1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .divider {
    margin-top: 10px;
    width: 100%;
    height: 0px;
    border: 1px solid;
    border-image: linear-gradient(
        90deg,
        rgba(103.0000014603138, 194.00000363588333, 208.0000028014183, 0),
        rgba(103.0000014603138, 194.00000363588333, 208.0000028014183, 0.4000000059604645),
        rgba(103.0000014603138, 194.00000363588333, 208.0000028014183, 0.4000000059604645),
        rgba(103.0000014603138, 194.00000363588333, 208.0000028014183, 0)
      )
      1 1;
  }

  .unit-l-5 {
    color: #cdd5db;
    margin: 0 6px;
  }

  .silder-left {
    margin-left: 20px;
    margin-right: 5px;
  }

  .timeLocaltion {
    position: absolute;
    width: 240px;
    height: 24px;
    border: 1px solid #75a4eb;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.example-block {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  white-space: nowrap;

  .example-demonstration {
    display: inline-block;
    font-size: 20px;
    color: #ffffff;
    margin-right: 7px;
  }

  ::v-deep .el-cascader {
    width: 100%;
    height: 31px;
  }

  ::v-deep .el-input__wrapper {
    background: #1c5e9c;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #75a4eb !important;
    height: 31px;
    padding: 0 5px 0 8px;
    box-shadow: none !important;
  }

  ::v-deep .el-input__wrapper input::-webkit-input-placeholder {
    color: white;
    opacity: 0;
  }

  ::v-deep .el-cascader__search-input {
    color: white;
  }

  ::v-deep .el-cascader__tags {
    width: 80px;
    height: 100%;
    // line-height: 100%;
    overflow-x: auto;
    margin-top: 2px;
    padding-bottom: 3px;
  }

  // 隐藏滚动条
  ::v-deep .el-cascader__tags::-webkit-scrollbar {
    display: none;
  }

  ::v-deep .el-cascader__tags .el-tag {
    background: #da9860 !important;
    color: #ffffff;
    max-width: 70px;
  }

  ::v-deep .el-icon svg {
    color: #ffffff;
  }
}

.example-block-zgd {
  ::v-deep .el-cascader__tags .el-tag {
    background: #da9860 !important;
    color: #ffffff;
    max-width: 300px !important;
  }
  ::v-deep .el-cascader__tags {
    width: 100% !important;
    height: 100%;
    overflow-x: none !important;
    margin-top: 2px;
    padding-bottom: 3px;
  }
}

::v-deep .el-cascader-menu .el-scrollbar__view .el-cascader-node:hover {
  background-color: rgba(0, 0, 0, 0) !important;
}

::v-deep .el-form-item {
  margin-bottom: 16px !important;
}

::v-deep .el-form-item__label {
  font-size: 18px;
  color: #ffffff;
  margin-right: 7px;
}

::v-deep .from-box .time {
  display: flex;
  justify-content: space-between;
}

::v-deep .from-box .time .el-form-item__label {
  margin-right: 0px;
  margin-left: 0;
}

::v-deep .el-checkbox-button__inner {
  background-color: rgba(0, 0, 0, 0);
  padding: 1px 8px;
  margin: 0;
  height: 24x;
  line-height: 21px;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #75a4eb !important;
  margin-right: 10px;
  color: #fff;
  font-size: 16px;
}

::v-deep .is-checked .el-checkbox-button__inner {
  background: #da9860;
  border: 1px solid #da9860 !important;
}

.from-box {
  font-size: 18px;
  color: #fff;
}

::v-deep .from-box .el-input {
  width: 50px;
  border: 0px solid #75a4eb !important;
  border-radius: 0px 0px 0px 0px;
}

::v-deep .from-box .el-input__wrapper {
  background: rgba(0, 0, 0, 0);
  border: 1px solid #75a4eb !important;
  border-radius: 0px 0px 0px 0px;
  box-shadow: none !important;
  padding: 0 3px;
}

::v-deep .from-box .el-input__inner {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  overflow: hidden;
  font-size: 14px;
  font-weight: 300;
  // border: 5px solid #75A4EB !important;
}

::v-deep .from-box .el-slider__runway {
  background: rgba(28, 94, 156, 0.6);
  border-radius: 0px 0px 0px 0px;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.inquire {
  width: 64px;
  height: 25px;
  background: linear-gradient(180deg, #9fc1f3 0%, #6e9ce2 100%);
  border-radius: 3px 3px 3px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  color: #002b4f;
  margin-left: 16px;
  padding: 0 4px;
}

// .btn .inquire:nth-child(2) {
//   width: 196px;
//   height: 46px;
//   background: linear-gradient(180deg, #356ba0 0%, #285785 100%);
//   border-radius: 0px 0px 0px 0px;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   font-size: 24px;
//   color: #ffff;
//   margin-left: 88px;
// }

// 精准找房
.accurate {
  display: flex;
  margin-top: 17px;
  margin-bottom: 26px;
  ::v-deep .el-select__wrapper {
    width: 156px;
    height: 45px;
    background: #1c5e9c;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #75a4eb;
    box-shadow: none;
    font-size: 18px;
    color: #ffffff;
  }

  ::v-deep .el-select__wrapper {
    width: 150px;
    background: #1c5e9c !important;
    border: 1px solid #67c2d0;
    color: #cdd5db;
    font-size: 14px !important;
    box-shadow: none;
  }
  ::v-deep .el-popper {
    background: #1c5e9c !important;
    border: 0px solid #67c2d0 !important;
    box-shadow: none !important;
  }

  ::v-deep .el-select-dropdown__item {
    color: white !important;
    background-color: rgba(0, 0, 0, 0) !important;
  }

  ::v-deep .el-select-dropdown__item:hover {
    color: #409eff;
    background-color: #fff;
  }

  .el-select-dropdown .el-select__placeholder__item.selected {
    color: #409eff !important;
    background-color: #fff;
  }

  .search {
    input {
      width: 371px;
      height: 45px;
      background: #1c5e9c;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #75a4eb;
      font-size: 18px;
      color: #ffffff;
      padding: 7px 12px;
    }

    input::placeholder {
      color: #cdd5db !important;
    }
  }
}
::v-deep .el-select__wrapper {
  height: 31px;
  background: #1c5e9c;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #75a4eb;
  box-shadow: none !important;
  font-size: 18px;
  color: #ffffff;
  margin-left: 9px;
}
::v-deep .el-select__placeholder.is-transparent span {
  color: #a8abb2 !important;
  font-size: 14px;
}
::v-deep .el-select__input {
  color: #fff !important;
}
</style>
<style lang="less">
.pg-custom-cascader {
  z-index: 1000000 !important;
  background: #1c5e9c !important;
  li {
    color: white !important;
    background-color: rgba(0, 0, 0, 0) !important;
  }
}
.assess-custom-select-popper {
  z-index: 1000000 !important;
}
</style>
